<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big{
            width: 1000px;
            height: 500px;
            /* 老师指定的宽度高度 */
            top: 15%;
            left: 12%;
            /* 老师指定的居中（这是第二种方法）第一种方法用left50%，top50%transform：translate(-50%,-50%) */
            background-image: url("F:/html1/html1/homework1/image/no hair people .jpg");
            /* 我插入背景图片 */
            background-size: 100%;
            /* 使其充满 */
            position: absolute;
            /* 为了下文相对位置 */
        }
        #small{width: 100px;
            height: 100px;
            /* 老师指定的小图标的宽度高度 */
            background-image: url("F:/html1/html1/homework1/image/bear two.jpg");
            /* 我插入可以移动的小图片 */
            position: relative;
            /* 子承父类，使其在上面的背景图像中移动 */
            background-size: 100%;
            /* 使小图标充满100px，100px */
            animation-duration: 10s;
            /* 循环时间 */
            animation-name: small;
            /* 动画名字 */
            animation-iteration-count: infinite;
            /* 表示无限循环 */
            animation-direction: alternate;
            /* 按照老师的方式循环 */
            animation-timing-function: linear;
            /* 按照老师的方式交替，即完成交替循环 */


        }
        @keyframes small {
            0%{top:0px;left:0px;}
            50%{top:150px;left:900px;}
            100%{top:400px;left:0px;}
            /* 动画的变化方式，配合完成交替循环 */
        }
    </style>

</head>
<body>
    <div class="big">
        <div id="small">
<!-- 子承父类，对应相对位置 -->
        </div>
    </div>
    
</body>
</html>